<template>
	<div>
		<div class="search">
			<input type="text" placeholder="搜索" />
		</div>
		<div class="nav">
			<ul>
				<li class="nav_1">
					<a href="#">分类</a>
				</li>
				<li class="nav_2">
					<a href="#">品牌</a>
				</li>
			</ul>
		</div>
		<div class="article">
			<ul>
				<li class="article_a1">
					<a href="#">
						腕表
					</a>
				</li>
				<li class="article_a2">
					<a href="#">
						腕表
					</a>
				</li>
			</ul>
		</div>
		<div class="article">
			<ul>
				<li class="article_a1">
					<a href="#">
						腕表
					</a>
				</li>
				<li class="article_a2">
					<a href="#">
						腕表
					</a>
				</li>
			</ul>
		</div>
		<div class="article">
			<ul>
				<li class="article_a1">
					<a href="#">
						腕表
					</a>
				</li>
				<li class="article_a2">
					<a href="#">
						腕表
					</a>
				</li>
			</ul>
		</div>
	</div>

</template>

<script>
	export default {
		name: 'HelloWorld',
		data() {
			return {
				msg: 'Welcome to Your Vue.js App'
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.search {
		margin-top:0.010rem;
		padding-bottom:0.010rem;
		display: flex;
		background-color: #FFFFFF;
		border-bottom: 1px solid #E0E0E0;
	}
	
	.search input {
		margin-left:0.020rem;
		margin-right:0.020rem;
		flex: 1;
		border-radius:0.05rem;
		border: none;
		outline: none;
		background-color: #e0e0e0;
		text-align: center;
	}
	
	.nav {
		background-color: #FFFFFF;
		padding-top:0.26rem;
	}
	
	.nav ul {
		width: 100%;
		display: flex;
		flex-direction: row;
	}
	
	.nav_1 {
		font-size:0.26rem;
		text-align: center;
		flex: 1;
	}
	
	.nav_1 a {
		color: #000;
		display: inline-block;
		width:1.18rem;
		padding-bottom:0.26rem;
		border-bottom: 4px solid #fed201;
	}
	
	.nav_2 {
		width: 50%;
		font-size:0.26rem;
		text-align: center;
		fill: 1;
	}
	
	.nav_2 a {
		color: #000000;
	}
	
	.article {
		padding-bottom:0.32rem;
		background-color: #fff;
	}
	
	.article ul {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	
	.article ul li a img {
		width:3.27rem;
		height:2.40rem;
	}
	
	.article ul li {
		width:3.27rem;
		height:2.40rem;
	}
	
	.article_a1 {
		margin-left:0.30rem;
		background: url(../assets/2-1.jpg) no-repeat 0px 0px;
		background-size: 100%;
	}
	
	.article_a1 a {
		display: inline-block;
		width:3.27rem;
		height:2.40rem;
		background-color: rgba(0, 0, 0, 0.4);
		text-align: center;
		line-height:2.40rem;
		color: #FFFFFF;
		font-size:0.30rem;
	}
	
	.article_a2 {
		margin-right:0.30rem;
		background: url(../assets/2-1.jpg) no-repeat 0px 0px;
		background-size: 100%;
	}
	
	.article_a2 a {
		display: inline-block;
		width:3.27rem;
		height:2.40rem;
		background-color: rgba(0, 0, 0, 0.4);
		text-align: center;
		line-height:2.40rem;
		color: #FFFFFF;
		font-size:0.30rem;
	}
</style>